@import (reference) "const";

/**
鼠标指针
 */
.cursor-p {
  cursor: pointer;
}

.cursor-m {
  cursor: move;
}

.cursor-d {
  cursor: default;
}

/**
字体粗细
 */
.font-bold {
  font-weight: bold;
}

.font-normal {
  font-weight: normal;
}

.font-lighter {
  font-weight: lighter;
}

/**
对齐方式
 */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}


/**
颜色
 */
.colorFunc(@name, @color) {
  .color-@{name} {
    color: @color;
  }
  .bg-@{name} {
    background-color: @color;
  }
  .bca-@{name} {
    border: 1px solid @color;
  }
  .bct-@{name} {
    border-top: 1px solid @color;
  }
  .bcb-@{name} {
    border-bottom: 1px solid @color;
  }
  .bctb-@{name} {
    border-bottom: 1px solid @color;
    border-top: 1px solid @color;
  }
  .bclr-@{name} {
    border-left: 1px solid @color;
    border-right: 1px solid @color;
  }
}

.colorFunc(~"primary", @primary-color);
.colorFunc(~"link", @link-color);
.colorFunc(~"success", @success-color);
.colorFunc(~"warning", @warning-color);
.colorFunc(~"error", @error-color);
.colorFunc(~"text", @text-color);
.colorFunc(~"text-sec", @text-color-secondary);
.colorFunc(~"border", @border-color-base);
.colorFunc(~"border-light", @border-color-light);
.colorFunc(~"text-gray", @text-gray-color);
.colorFunc(~"white", #fff);


/**
溢出隐藏
 */
.overflow-h {
  overflow: hidden;
}

/**
字体大小
 */
.fontSizeFunc(@name, @size) {
  .fz-@{name} {
    font-size: @size;
  }
}

.fontSizeFunc(~"xs", @fz_extra_small);
.fontSizeFunc(~"sm", @fz_small);
.fontSizeFunc(~"bs", @fz_base);
.fontSizeFunc(~"md", @fz_medium);
.fontSizeFunc(~"lg", @fz_large);
.fontSizeFunc(~"xl", @fz_extra_large);

.fontSizeFunc(~"content", @fz_base);
.fontSizeFunc(~"title", @fz_large);


/**
间距尺寸
 */
.spaceFunc(@type, @style, @name, @size) {
  .@{type}t-@{name} {
      @{style}-top: @size;
  }
  .@{type}l-@{name} {
      @{style}-left: @size;
  }
  .@{type}r-@{name} {
      @{style}-right: @size;
  }
  .@{type}b-@{name} {
      @{style}-bottom: @size;
  }
  .@{type}lr-@{name} {
      @{style}-left: @size;
      @{style}-right: @size;
  }
  .@{type}tb-@{name} {
      @{style}-top: @size;
      @{style}-bottom: @size;
  }
  .@{type}a-@{name} {
      @{style}: @size;
  }
}

.spaceFunc(~'p', ~'padding', ~"xs", @space_mini);
.spaceFunc(~'p', ~'padding', ~"sm", @space_small);
.spaceFunc(~'p', ~'padding', ~"md", @space_medium);
.spaceFunc(~'p', ~'padding', ~"lg", @space_large);

.spaceFunc(~'m', ~'margin', ~"xs", @space_mini);
.spaceFunc(~'m', ~'margin', ~"sm", @space_small);
.spaceFunc(~'m', ~'margin', ~"md", @space_medium);
.spaceFunc(~'m', ~'margin', ~"lg", @space_large);


/**
定位方式
 */
.pos-a {
  position: absolute;
}

.pos-r {
  position: relative;
}

.pos-f {
  position: fixed;
}

.pos-s {
  position: sticky;
}

.border-box {
  box-sizing: border-box;;
}

/**
尺寸大小
 */
.w100p {
  width: 100% !important;
}

.h100p {
  height: 100% !important;
}

.w0 {
  width: 0;
}

.h0 {
  height: 0;
}

.wh100p {
  width: 100% !important;
  height: 100% !important;
}

.wh0 {
  width: 0 !important;
  height: 0 !important;
}

/**
flex 布局
 */
.flex-horiz {
  display: flex;

  &.flex-same {
    > * {
      width: 0;
      flex-grow: 1;
    }
  }
}

.flex-column {
  display: flex;
  flex-direction: column;

  &.flex-same {
    > * {
      height: 0;
      flex-grow: 1;
    }
  }
}

.flex-grow {
  flex-grow: 1;
}

.flex-not-shk {
  flex-shrink: 0;
}

.flex-center {
  align-content: center;
  align-items: center;
}

.flex-center-j {
  justify-content: center;
  justify-items: center;
}

.flex-center-all {
  .flex-center;
  .flex-center-j;
}


/**
盒子阴影
 */
.box-shadow-thin {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.box-shadow-thick {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

/**
滚动条样式
 */
.scroll-thin {

  &::-webkit-scrollbar {
    background-color: transparent;
    width: 5px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(120, 120, 120, .3);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-corner {
    background-color: transparent;
    height: 0;
  }
}

.scroll-xy {
  overflow: auto;
}

.scroll-y {
  overflow-x: hidden;
  overflow-y: auto;
}

.scroll-x {
  overflow-y: hidden;
  overflow-x: auto;
}


/**
旋转动画
 */
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

.rotation {
  -webkit-transform: rotate(360deg);
  animation: rotation 2.7s linear infinite;
}